<template>
  <ele-modal
    class="el-model-class"
    :show-close="false"
    width="800px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    @close="updateVisible(false)"
  >
    <iframe width="100%" style="height: 60vh; width: 100%; border: none;" :src="map_src"></iframe>
    <template slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button @click="handleSureMap" type="primary">确定</el-button>
    </template>
  </ele-modal>
</template>

<script>
    export default {
        name: "position",
    data(){
      return{
        visible: false,

        //修改11
        map_src: 'https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=D4FBZ-TGQ6J-I2HFZ-FVHIT-VLIH7-Z6BZS&referer=location',
        form: {
          //省市区ID
          id_area: [
            0,
            0,
            0
          ],
          address: '',
          lng: '',
          lat: '',
        },
        map_data: {
          url: 'https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=这里放你使用的key&referer=location',
          address: '',
          lng: '',
          lat: '',
        },
      }
    },
      created() {
        let that = this
        window.addEventListener('message', function(event) {
          // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
          var loc = event.data;
          console.log(loc)
          if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
            that.map_data.address = loc.poiaddress
            that.map_data.lat = loc.latlng.lat
            that.map_data.lng = loc.latlng.lng
            that.$emit('chooseMapPoint',that.map_data)
          } else {
            that.$emit('chooseMapPoint','选择数据为空')
          }
        }, false);
      },
      methods:{
        //地图选点确定
        handleSureMap() {
          console.log("this.map_data",this.map_data)
          this.$emit('sure', this.map_data)
          this.updateVisible(false)
        },
        // 取消
        handleCancelMap () {
          this.$emit('cancel')
        },


        show(){
          console.log("进入位置show=======")
          this.visible = true;
        },
        /* 更新 visible */
        updateVisible(value) {
          this.visible=value
          this.isSuccess = false
          this.isError = false
          this.codeImg=''
        },
      }
    }
</script>

<style scoped>

</style>
